<template>
  <div class="navigation-bar">
    <div class="brief-title">
      <span>导航栏</span>
    </div>
    <div v-if="menu" class="boxs">
      <div class="box"
        v-for="(item, index) in menu"
        :key="index"
        :class="item.code"
      >
        <div class="nav-title-group">
          <div class="nav-line"></div>
          <div class="nav-title">{{ item.name }}</div>
        </div>
        <div class="nav-container">
          <div
            v-for="(_item, _index) in item.children"
            :key="_index"
            class="nav-wrapper"
          >
            <div
              v-for="(item, index) in _item.children"
              :key="index"
              :class="item.noMenu ? 'nav-item active' : 'nav-item'"
              @click="item && item.path ? toLink(item.path) : ''"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div
        v-for="(item, index) in navbars"
        :key="index"
        :class="item.class"
      >
        <div class="nav-title-group">
          <div class="nav-line"></div>
          <div class="nav-title">{{ item.name }}</div>
        </div>
        <div class="nav-container">
          <div
            v-for="(_item, _index) in item.children"
            :key="_index"
            class="nav-wrapper"
          >
            <div
              v-for="(item, index) in _item"
              :key="index"
              :class="item.noMenu ? 'nav-item active' : 'nav-item'"
              @click="item && item.url ? toLink(item.path) : ''"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "navigation-bar",
  data() {
    return {
      navbars: [
        {
          name: "信息查询",
          class: "",
          children: [
            [
              {name: "个人信息", isActive: false},
              {
                name: "课程考核实施计划",
                isActive: true,
                url: "/student/assessmentPlan/plan",
              },
            ],
            [
              {name: "培养方案", isActive: false},
              {name: "考试安排", isActive: true},
            ],
            [
              {name: "课表", isActive: false},
              {name: "课程考核成绩", isActive: true},
            ],
            [
              {name: "评教结果查看", isActive: true},
              {name: "公共考试成绩", isActive: false},
            ],
          ],
        },
        {
          name: "选修课",
          class: "grep",
          children: [
            [{name: "网上选课", isActive: false}],
            [{name: "登记互联网课", isActive: false}],
          ],
        },
        {
          name: "课程考核与评价",
          class: "yellow",
          children: [
            [{name: "申请缓考", isActive: true}],
            [{name: "填报互联网课成绩", isActive: false}],
            [{name: "在线考试", isActive: false}],
            [{name: "网上评教", isActive: true}],
          ],
        },
        {
          name: "教学运行数据",
          class: "grep",
          children: [[{name: "填报教学运行数据", isActive: false}]],
        },
      ],
      navbarlist: '',
      isMenu: false
    }
  },
  created() {
    // this.navbarlist = this.getNavbar()
  },
  methods: {
    // getNavbar: function () {
    //   if (this.menu) {
    //     this.isMenu = true
    //     return this.menu
    //   } else {
    //     this.isMenu = false
    //     return this.navbars
    //   }
    // },
    toLink(url) {
      if(url!=='/'){
        this.$router.push(url);
      }

    }
  },
  mounted() {

  },
  computed: {
    ...mapGetters(["menu"]),

  },//计算属性
}
</script>

<style scoped>
@import "../../../styles/home.less";
</style>
